import { createRouter, createWebHashHistory } from 'vue-router'

// 导入页面组件
import Home from '../views/Home.vue'
import PageInfo from '../views/PageInfo.vue'
import Option from '../views/Option.vue'

// 路由配置
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    redirect: '/pageinfo',
    meta: { title: '首页' },
    children: [
      {
        path: 'pageinfo',
        name: 'PageInfo',
        component: PageInfo,
        meta: { title: '页面信息' },
      },
      {
        path: 'option',
        name: 'Option',
        component: Option,
        meta: { title: '设置' },
      },
    ],
  },
]

// 创建路由实例
const router = createRouter({
  // 使用 Hash 模式 - Chrome 插件必须使用此模式
  history: createWebHashHistory(),
  routes,
})

// 路由守卫 - 设置页面标题
router.beforeEach((to, from, next) => {
  // 更新文档标题
  if (to.meta.title) {
    document.title = `${to.meta.title} - Vue3 Chrome Extension`
  }
  next()
})

export default router
